<template>
  <div class="menu">

    <div class="tree_lay_zky">
      <el-menu
        class="el-menu-vertical-demo"
        text-color="#232323"
        background-color="#f3f3f3"
        active-text-color="#23a4a4"
        @select="handelSelect"
      >
        <el-menu-item v-for="(item,index) in router" :key="index" @click="routerGo(item,index)" v-if="item.name">
          <i :class="item.meta.icon?item.meta.icon:'el-icon-location'"></i>
          <span>{{item.meta.title}}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!--遮罩层块-->
    <div class="content" @click="handelSelect"></div>
  </div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
export default {
	data(){
		return{
			strPath:'',
		}
	},
	props:{
//		datas: {
//			required: true
//		},
	},
  created(){
  	this.keyup();
  },
  mounted() {
  	  // setTimeout(()=>{
  	  //  console.log(this.router,'_______________看看值')
      // },1000)
  },
   computed:{
  	...mapState(['router']),
  },
  methods: {
  	...mapMutations(['addRoutes','setPath']),
    handelSelect() {
         this.$parent.menu();
    },
    rouIndex(){
//  	this.$router.push('/')
//  	this.setPath({
//			'name':'首页',
////			'icon':this.vRoute[0].meta.icon
//		})
//		this.addRoutes([{
//            path: '/index',
//            name: 'index',
//            meta: {
//              title: '全景检测',
//            },
//      }])
    },
    routerGo(item,index){
    	this.$parent.$refs.menus.current = true;
    	this.strPath = '';
    	this.mapTree(item);
    	this.$router.push('/' + this.strPath.split('/').filter(item=>{return item != ""}).reverse().join('/'))
    	console.log('/' + this.strPath.split('/').filter(item=>{return item != ""}).reverse().join('/'))
			this.setPath(
				{
				'name':this.router[index].meta.title,
				'icon':this.router[index].meta.icon
				}
				)
			this.addRoutes(this.router[index].children);
    },
    mapTree(org) {
	    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
	    if(haveChildren){
	    	this.mapTree(org.children[0])
	    }
	    this.strPath += '/'+org.path
		},
    //Esc键盘事件
    keyup(){
    	let that = this;
  		document.onkeydown = function (event) {
  			let e = event || window.event || arguments.callee.caller.arguments[0];
  			if (e && e.keyCode == 27) {
  				//layout内的showMenu 置false
				that.$options.parent.showMenu = false
  			}
  		};
  	},
  }
};
</script>

<style lang="scss" scoped>
.menu {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  top: 70px;
  height: 100%;
  display: flex;
  z-index: 99999;
  .tree_lay_zky {
    width: 280px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;padding-bottom: 74px;
    background: #f3f3f3;
  }
  .content {
  	flex: 1;
  }
  .el-menu-item{
    font-size: 14px;
    background: #f3f3f3;
  }
  .is-active{
  	background: #dedede !important;
  }
}
</style>
